<template>
	<view class="container">
		<view class="title">
			请选择取消订单的原因
		</view>

		<view class="radiobox">
			<radio-group @change="choose">
				<label v-for="item in reason" :key="item.id">
					<text>{{item.content}}</text>
					<radio :value="item.id" />
				</label>
			</radio-group>
		</view>
		<textarea ref="textA" v-model="userReason" placeholder="请说明原因.." :disabled="showArea" />
		<button type="primary" @click="resonSubmit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showArea: true,
				userReason: "",
				submitInfo: {
					id: 0,
					content: "",
				},
				reason: [{
						id: "1",
						type: "normal",
						content: "临时有事, 不需要了",
					},
					{
						id: "2",
						type: "normal",
						content: "路上时间太长",
					},
					{
						id: "3",
						type: "normal",
						content: "点错了",
					},
					{
						id: "4",
						type: "normal",
						content: "忘记写备注",
					},
					{
						id: "5",
						type: "normal",
						content: "地址/电话填写错误",
					},
					{
						id: "6",
						type: "other",
						content: "其他原因, 在下方填写",
					},
				],
			}
		},
		methods: {
			choose(e) {
				let a = e.detail.value;
				a == "6" ? this.showArea = false : this.showArea = true;
				this.submitInfo.id = a;
			},
			resonSubmit() {
				var canSub = false;
				var info = this.submitInfo
				info.content = this.userReason;
				if ((this.submitInfo.id != 0 && this.submitInfo.id != "6")) {
					this.reason.forEach(item => {
						if (item.id == info.id) info.content = item.content;
						canSub = true;
					})
				} else if (this.submitInfo.id == "6" && this.submitInfo.content) {
					info.content = this.userReason;
					canSub = true
				};
				if (canSub) {
					uni.showToast({
						title: "提交成功",
						duration: 1000,
					});
					uni.switchTab({
						url:"../service"
					})
				} else {
					uni.showToast({
						title: "请说明您的理由",
						duration: 1000,
						icon: "error"
					});
				};
				info.content = "";
			}
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-flow: column nowrap;
		padding: 20rpx;
		background-color: #FFFFFF;
	}

	.title {
		font-size: 1rem;
		margin-bottom: 20rpx;
	}

	radio-group {
		display: flex;
		flex-flow: column nowrap;
	}

	label {
		height: 50rpx;
		line-height: 50rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		margin-bottom: 20rpx;
		font-size: 0.9rem;
	}

	radio {
		height: 10rpx;
	}

	textarea {
		background-color: rgba(226, 226, 226, 0.3);
		border-radius: 10rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	button {
		width: 100%;
		background-color: #007AFF;
	}
</style>
